


How to make a Rounded Playlist

by La_Temperanza



Series: AO3 Work Skins/Tutorials [5]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2015-09-19
Updated: 2015-09-19
Packaged: 2018-04-21 10:39:55
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,040
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/4826000
Author URL: https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza
Summary: <blockquote class="userstuff">
              <p>Original coding and design is from <a href="http://layouttesst.livejournal.com/24421.html">layouttest</a>. I make no claims for it, just tweaked it so it will work on AO3.</p>
            </blockquote>





	How to make a Rounded Playlist

THIS BE A TITLE LINE

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Song Title](YOUTUBE%20URL) [Song Artist](LYRICS%20URL) 0:00

[Code by Layouttesst](http://layouttesst.livejournal.com/profile)

* * *

# HOW TO CODE IT

First, go to "[My Work Skins](http://archiveofourown.org/users/La_Temperanza/skins?skin_type=WorkSkin)". If you're not currently using a work skin for your piece, hit the button on the top right that says "[Create Work Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:
    
    
    #workskin .titleline {
      width: 600px;
      text-align: center;
      font-size: 32px;
      color: #444;
      line-height: 75%;
      letter-spacing: 1px;
      font-family: georgia;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    
    #workskin .mainbox {
      margin-left: auto;
      margin-right: auto;
      border: 20px solid #444;
      border-radius: 15px;
      max-height: 250px;
      width: 600px;
      overflow-y: auto;
      font-family: georgia;
      font-size: 12px;
      color: #444;
      margin-top: -19px;
    }
    
    #workskin .mainbox a:link,
    #workskin .mainbox a:visited,
    #workskin .mainbox a:hover,
    #workskin .mainbox a:active {
      text-decoration: none;
      border-bottom: 1px dotted #555;
      color: #555;
    }
    
    #workskin .darkgray {
      background: #ddd;
      padding: 7px;
      margin: 0px;
    }
    
    #workskin .lightgray {
      background: #eee;
      padding: 7px;
      margin: 0px;
    }
    
    #workskin .songtitle {
      text-decoration: none;
      color: #555;
    }
    
    #workskin .songartist {
      padding-left: 250px;
      display: flex;
      margin-top: -19px;
    }
    
    #workskin .timestamp {
      float: right;
      margin-top: -19px;
    }
    
    #workskin .credit,
    #workskin .credit a:link,
    #workskin .credit a:visited,
    #workskin .credit a:hover,
    #workskin .credit a:active {
      margin: 0 auto;
      width: 600px;
      text-align: right;
      font-size: 12px;
      color: #444;
      text-decoration: none;
    }

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the playlist. Now to implement it.

Go to your the work you want the playlist in, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", find where you want the playlist to be located, and paste the following code:
    
    
    <p class="titleline">
    THIS BE A TITLE LINE</p>
    <p></p><div class="mainbox">
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p>
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p>
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p>
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p>
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p>
    
    <p class="darkgray">
    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span>
    </p>
    
    <p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
    <span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
    <span class="timestamp">0:00</span></p></div>
    
    <p class="credit">
    <a href="http://layouttesst.livejournal.com/profile">Code by Layouttesst</a>
    </p>

Edit the URLs, Lines from the song, Song Titles, Song Artists, and Time Stamps to your liking, and you're done! While there's no need to credit me for converting it to AO3, please respect the wishes of the original designer and leave the credit link at the bottom of the playlist. Also, go to the [original post](http://layouttesst.livejournal.com/24421.html) and leave some love! :D


End file.
